<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix='fmt' %>

<c:set var="title" value="轮播管理"/>
<%@include file="common/adminHeader.jsp" %>
<c:set var="light" value="5"/>
<%@include file="common/adminNavigator.jsp" %>
<style>
    #tablelist span {
        height: 80px;
        line-height: 80px;
    }
    .img-rounded {
        border-radius: 6px;
        height: 63px;
    }
</style>
<div class="container" >
    <div class="right-top-box">
        <div class="btn bs-bars">
            <a class="btn-product" id="btn_add" title="添加">
                <i class="fa fa-plus fa-fw"></i>
            </a>
            <a class="btn-delete" id="btn_delete_ids" title="批量删除">
                <i class="fa fa-trash-o fa-fw"></i>
            </a>
        </div>
        <div class="row" id="tb">
            <div class="col-md-12">
                <form class="form-inline" id="resource-form">
                    <div class="group-inner">
                        <input type="text" class="form-control form-input" id="search-id" name="search-id"  placeholder="id">
                    </div>
                    <div class="group-inner">
                        <input type="text" class="form-control form-input" id="search-url" name="search-url" placeholder="路径">
                    </div>
                    <div class="group-inner">
                        <input type="text" class="form-control form-input" id="search-title" name="search-title" placeholder="标题">
                    </div>
                    <a class="btn btn-info glyphicon glyphicon-search form-search group-inner" id="btnSearch" >
                    </a>
                </form>
            </div>
        </div>
    </div>
    <table id="tablelist"></table>
    <script type="text/javascript" src="render/js/manager/common.js"></script>
    <script type="text/javascript" src="render/js/manager/bannerManager.js"></script>
</div>
<div class="modal fade" id="addOrUpdateModal" tabindex="-1" role="dialog" aria-labelledby="addroleLabel" data-backdrop="static" aria-hidden="false">
    <div class="modal-backdrop fade"></div>
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="addroleLabel">修改商品</h4>
            </div>
            <div class="modal-body">
                <form id="addOrUpdateForm" class="form-horizontal form-label-left">
                    <input type="hidden" name="id" value="">
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="title">标题<span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" class="form-control col-md-7 col-xs-12" name="title" id="title" required="required" placeholder="请输入banner标题">
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="url">路径<span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" class="form-control col-md-7 col-xs-12" name="url" id="url" required="required" placeholder="请输入banner路径">
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12">图片</label>
                        <div class="col-md-6 col-sm-6 col-xs-12 img_wh">
                            <input type="file" class="form-control col-md-7 col-xs-12" name="image" id="image" placeholder="图片">
                            <span id="insert_img" class="insert_img">
                                <img src='' id='image_url' class='img-responsive img-rounded auto-shake' name="image" onclick='javascript:fn_browse_image();'>
                            </span>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="status">状态</label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <%--<input type="text" class="form-control col-md-7 col-xs-12" name="status" id="status" data-validate-length-range="0,20">--%>
                            <select class="form-control" name="status" id="status">
<%--                                <option value="1" selected disabled>请选择</option>--%>
                                <option value="1">上架</option>
                                <option value="0">下架</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"> 关闭</i></button>
                <button type="button" class="btn btn-success addOrUpdateBtn"><i class="fa fa-save">保存</i></button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $("#image").change(function() {
        var file = $('#image')[0].files[0];
        var binaryData = [];
        binaryData.push(file);
        $("#image_url").attr("src", window.URL.createObjectURL(new Blob(binaryData,{type:"application/zip"})));
    });


    var E = window.wangEditor;
    var editor = new E('#editor');
    // 或者 var editor = new E( document.getElementById('editor') )
    // 自定义配置颜色（字体颜色、背景色）
    editor.customConfig.colors = [
        '#000000',
        '#eeece0',
        '#1c487f',
        '#4d80bf',
        '#c24f4a',
        '#8baa4a',
        '#7b5ba1',
        '#46acc8',
        '#f9963b',
        '#ffffff'
    ];

    // 自定义菜单配置
    editor.customConfig.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        'emoticon',  // 表情
        'image',  // 插入图片
        'table',  // 表格
        'video',  // 插入视频
        'code',  // 插入代码
        'undo',  // 撤销
        'redo'  // 重复
    ];

    // 自定义 onchange 触发的延迟时间，默认为 200 ms
    editor.customConfig.onchangeTimeout = 1000; // 单位 ms

    // 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
    editor.customConfig.uploadImgShowBase64 = true;   // 使用 base64 保存图片

    editor.create();
    E.viewsource.init('#editor');
    E.fullscreen.init('#editor');

    $("#detailBtn").on("click",function () {
        var show = $('#editor').css('display');
        if ( show == 'block'){
            $('#editor').css('display','none');
            $("#detailBtn").val("编辑商品介绍");
        }
        if ( show == 'none'){
            $('#editor').css('display','block');
            $("#detailBtn").val("关闭商品介绍");
        }
    });

    function editorText() {
        return editor.txt.html();
    }

    function editorContent(content) {
        editor.txt.html(content);
    }
</script>
<%@include file="common/adminFooter.jsp" %>
